{% extends "main.html" %}
{% block extra_head %}
<!-- stylesheets and js libraries here -->
<link rel="stylesheet" type="text/css" media="screen" href="{{ MEDIA_URL }}/jquery-ui/css/smoothness/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="{{ MEDIA_URL }}/rooms/default.css" />
<script type="text/javascript" src="{{ MEDIA_URL }}/jquery-ui/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}/jquery-ui/js/jquery-ui-1.8.16.custom.min.js"></script>
{% endblock %}

{% block main_content %}
<div id="action_buttons">
	<div id="checkin">Return a Key</div>
	<div id="bookroom">Book a Room</div>
</div>

<div id="login_form" style="display: none;">
	<input type="text" id="id_barcode" />
</div>
<div id="scan_key_form" style="display: none;">
	<input type="text" id="id_keybarcode" />
</div>
<div id="select_time_form" style="display: none;">
	<div id="time">30 minutes</div>
	<div id="time_slider"></div>
</div>
<div id="error_dialog" style="display: none;"></div>

<div id="curr_time">Current time is: <span id="clock"></span></div>

{% if avail|length = 1 %}
<p>No rooms have been added yet. Please finish configuring this application in the administrative back-end.</p>
{% else %}
<table id="availability">
	{% for row in avail %}
		{% cycle '' 'odd' as row_color silent %}
		{# alternating row styles #}
		<tr class="{{ row_color }}">
		{% for e in row %}
			{% if avail|first = row %}
				<th>{{ e }}</th>
			{% else %}
				{% if row|first = e %}
					<th class="header">{{ e }}</th>
				{% else %}
					<td class="{% if e = 0 %}available{% else %}unavailable{% endif %}">&nbsp;</td>
				{% endif %}
			{% endif %}
		{% endfor %}
		</tr>
	{% endfor %}
	{% comment %}Blank row to cap the bottom; make sure RES_LOOK_AHEAD_HOURS is some
	factor of 0.5 or else the bottom cap won't look right.{% endcomment %}
	<tr class="odd">{% for e in avail|first %}<td></td>{% endfor %}</tr>
</table>
{% endif %}
{% endblock %}

{% block footer %}
<script type="text/javascript" src="{{ MEDIA_URL }}/rooms/scripts.js"></script>
{% endblock %}
